<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/plan.css">
</script>
<style>
    .nextTable {
        width: 100%;
    }

    .box .layui-input-block {
        width: 100%;
    }

    /* table thead tr th, */
    table tbody tr .t {
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
        /*规定段落的文本不进行换行*/
        overflow: hidden;
        /*超出隐藏*/
        text-overflow: ellipsis;
        /*隐藏的字符用省略号表示  IE*/
        -moz-text-overflow: ellipsis;
        /*隐藏的字符用省略号表示  火狐*/
    }

    table {
        table-layout: fixed;
        /*table的内部布局固定大小，才可以通过td的width控制宽度*/
        word-wrap: break-word;
        /*允许长单词换到下一行*/
    }
</style>
<div class="layui-containner">
    <div class="layui-fluid">
        <div class="layui-title">巡检工单详情</div>
        <ul class="box layui-row">
            <li class="layui-col-md4 layui-col-sm4">
                <div class="layui-form-item">
                    <label class="layui-form-label">工单编号: </label>
                    <div class="layui-input-block">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">工单名称:</label>
                    <div class="layui-input-block">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">工单状态：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">巡检计划名称：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
            </li>
            <li class="layui-col-md4 layui-col-sm4">
                <div class="layui-form-item">
                    <label class="layui-form-label">巡检开始时间：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> 巡检截止时间：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> 巡检耗时：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> 实际完成时间：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
            </li>
            <li class="layui-col-md4 layui-col-sm4 xun">
                <div>巡检人: <span></span></div>
                <div>位置范围：<span></span></div>
                <div>巡检说明：<span></span></div>
            </li>
        </ul>
    </div>
    <div class="layui-fluid">
        <div class="layui-title">
            <span class="layui-title-inner">设备基本信息</span>
        </div>
        <table class="layui-table" lay-size="sm">
            <thead>
                <tr>
                    <th>设备编号</th>
                    <th>设备名称</th>
                    <th>设备类型</th>
                    <th>供应商</th>
                    <th>设备系列</th>
                    <th>设备型号</th>
                    <th style="width: 50%;">巡检项目</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<script>
   layui.use(['table', 'admin', 'laypage', 'laytpl', 'tree', 'form', 'api', 'view', 'laydate', 'utill'], function () {
    var $ = layui.$,
        admin = layui.admin,
        view = layui.view,
        api = layui.api,
        table = layui.table,
        setter = layui.setter,
        laytpl = layui.laytpl,
        utill = layui.utill,
        tree = layui.tree,
        laydate = layui.laydate,
        form = layui.form;
        var href = JSON.parse(sessionStorage.getItem('layui-this'));
        $(href).addClass('layui-this');
        form.render();
        // 巡检计划详情信息 

        let planId = layui.router().hash.split('=')[1]
        admin.req({
                type: 'post',
                url: layui.api.host + '/order/selectPollingOrderDetails.json',
                dataType: 'json',
                contentType: "application/json",
                data:JSON.stringify({id:planId}),
                success: function (res) {
                    let planDetails = res.data.equip // 表格数据
            let planid = res.data.fil // 头部信息 
            let table = `<tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                        <table class="nextTable">
                                            <thead>
                                                <tr>
                                                    <td>项目名称</td>
                                                    <td>项目说明</td>
                                                    <td>单位</td>
                                                    <td>最高标准值</td>
                                                    <td>最低标准值</td>
                                                    <td>是否异常</td>
                                                    <td>巡检结果</td>
                                                </tr>
                                            </thead>
                                        </table>
                                    </td>
                                </tr>`;
            if (planid.fil05 == 1) {
                planid.fil05 = '待执行';
            } else if (planid.fil05 == 2) {
                planid.fil05 = '未完成';
            } else if (planid.fil05 == 7) {
                planid.fil05 = '超时';
            }
            else if (planid.fil05 == 8) {
                planid.fil05 = '超时完成';
            }
            else if (planid.fil05 == 9) {
                planid.fil05 = '已完成';
            }
            $('.layui-input-block').eq(0).html(planid.fil01)
            $('.layui-input-block').eq(1).html(planid.tcReqName)
            $('.layui-input-block').eq(2).html(planid.fil05)
            $('.layui-input-block').eq(3).html(planid.tcReqName)
            $('.layui-input-block').eq(4).html(planid.fil12)
            $('.layui-input-block').eq(5).html(planid.fil13)
            $('.layui-input-block').eq(6).html(planid.tcReqDuration + " /小时")
            $('.layui-input-block').eq(7).html(planid.fil15)
            $('.xun div span').eq(0).html(planid.xjgen02)
            $('.xun div span').eq(1).html(planid.fil07)
            $('.xun div span').eq(2).html(planid.fil21)

            planDetails.forEach(item => {
                let nextTable = ''
                item.xjproject.forEach(elem => {
                    nextTable += `<table class="nextTable">
                                            <tbody>
                                                <tr>
                                                    <td class="t">${elem.tcInspName}</td>
                                                    <td class="t">${elem.tcInspDsc}</td>
                                                    <td class="t">${elem.tcInspUnit}</td>
                                                    <td class="t">${elem.tcInspMax}</td>
                                                    <td class="t">${elem.tcInspMin}</td>
                                                    <td class="t">${elem.tcProjStatus == 1 ? '是' : '否'}</td>
                                                    <td class="t">${elem.tcProjDsc || '&nbsp;&nbsp;'}</td>
                                                </tr>
                                            </tbody>
                                        </table>`
                })
                table += `<tr>
                                    <td class="t">${item.fia01}</td>
                                    <td class="t">${item.fia02}</td>
                                    <td class="t">${item.fic02}</td>
                                    <td class="t">${item.pmc03}</td>
                                    <td class="t">${item.tcSeriesCode}</td>
                                    <td class="t">${item.fii02}</td>
                                    <td class="t">
                                        ${nextTable}
                                    </td>
                                </tr>`

            })
            $('.layui-table tbody').html(table)
                }
        })
    })
</script>